<template>
  <div class="pr ">
    <div id="navleft"></div>
    <div class="shape-wrap">
      <div class="b-shape-1">
        <img src="/imgs/shape-1.png" alt="">
      </div>
      <div class="b-shape-2">
        <img src="/imgs/shape-2.png" alt="">
      </div>
      <div class="b-shape-3">
        <img src="/imgs/shape-3.png" alt="">
      </div>
      <div class="b-shape-4">
        <img src="/imgs/shape-4.png" alt="">
      </div>
    </div>
    <div id="nav">
      <div class="app_router" style="flex: 1 1 0%;">
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
          <div class="home app_router" style="flex: 1 1 0%;">
            <div class="loginView mainContent">
              <div class="login_title_content"></div>
              <div class="loginTitle center flex-c">
                <div class="loginActive fz30 mt10">登录</div>
              </div>
              <div>
                <div class="inputView"><input type="text" name="account"
                                              autocomplete="account"
                                              v-model.trim="userLogin.account"
                                              class="phoneView margin-bottom-32"
                                              placeholder="请输入账号"
                                              maxlength="60"
                                              id="account"
                ></div>
                <div class="inputView passView pr" style="margin-top: -10px">
                  <input autocomplete="current-password"
                         name="password" placeholder="输入6-16位密码"
                         id="password"
                         class="phoneView" :type="loginpwd?'password':'text'"
                         v-model.trim="userLogin.password"
                         maxlength="16">
                  <img
                      class="check" src="/imgs/seePass.svg" @click="seePwd()"/>
                </div>
                <div  class="inputView" style="margin-top: 15px"><input
                    autocomplete="current-password"
                    placeholder="请输入验证码"
                    id="code"
                    class="phoneView" type="text"
                    v-model="userLogin.code"
                    maxlength="4">
                  <img :src="baseUrl+'/code/get?uuid='+loginUuid" alt="点击更换" title="点击更换" @click="handleLoadCaptcha"
                       style="position: absolute;right:3px;top:2px;width: 120px;height: 39px;">
                </div>
                <div class="loginButton center" @click.prevent="handleLogin"> 登录</div>
              </div>
<!--              <div class="thirdLogin center">-->
<!--                <span class="des-span">登录或注册即同意-->
<!--                  <a target="_blank" href="/page/yinsi.html">《隐私政策》</a>与-->
<!--                  <a target="_blank" href="/page/userxieyi.html">《用户服务协议》</a>-->
<!--                </span>-->
<!--              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
import {getBaseURL} from "@/config/common.js";

const baseUrl = ref(getBaseURL())
const route = useRoute()
const loginUuid = ref(getUUID())
const loginpwd = ref(true)
const userLogin = ref({account:"",password:"","codeuuid":"",code:""})
const userStore = useStore.userState()
var timer = null
const seePwd = ()=>{
  loginpwd.value = !loginpwd.value
}

const handleLogin = async ()=>{
  try {

    if(!userLogin.value.account){
      useMessage().error("请输入账号");
      getDom("account").focus()
      return
    }

    if(!userLogin.value.password){
      useMessage().error("请输入密码");
      getDom("password").focus()
      return
    }

    if(!userLogin.value.code){
      useMessage().error("请输入验证码");
      getDom("code").focus()
      return
    }

    userLogin.value.codeuuid = loginUuid.value
    // 1: 这里就请求服务端登录接口
    const resp = await useHandleLoignApi(userLogin.value)
    // 2: 提示
    useMessage().success("登录成功，欢迎回来!")
    // 3: 把用户信息存放到状态管理中，其实就前段的session技术，目的就是给后续所有路由请求都可以获取到用户信息
    userStore.setUserInfo(resp.data)
    // 4: 跳转首页
    const indexPath = userStore.indexPath
    navigateTo( indexPath || route.query.from,{replace:true})
  }catch(e){
    if(e.code == 40011){
      useMessage().error(e.msg)
      userLogin.value.password = ""
      getDom("password").focus()
    }

    // 捕捉是否绑定系统
    if(e.code == 40022){
      useMessage().error(e.msg)
      userLogin.value.code = ""
      getDom("code").focus()
      handleLoadCaptcha()
    }

    if(e.code == 40010 || e.code == 40006){
      useMessage().error(e.msg)
      getDom("account").focus()
      userLogin.value.code = ""
      getDom("code").focus()
      handleLoadCaptcha()
    }

    if(e.code == 40012){
      useMessage().error(e.msg)
      userLogin.value.code = ""
      getDom("code").focus()
      handleLoadCaptcha()
    }

    if(e.code ===90001){
      for(var key in e.msg) {
        useMessage().error(e.msg[key])
        getDom(key).focus()
      }
    }
  }
}


const handleLoadCaptcha = ()=>{
  loginUuid.value = getUUID()
  handleRefresh()
}


const handleRefresh = ()=>{
  if(timer)clearInterval(timer)
  timer = setInterval(()=>{
    loginUuid.value = getUUID()
  },1000 * 60 * 2)
}

// 监听enter提交登录
useEneterEvent(handleLogin)
useHead({title: '登录'})

definePageMeta({
  layout: "login",
  middleware:"repeat-login"
})

onMounted(()=>{
  handleRefresh()
})

</script>
<style scoped>
@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
  }
}

@-webkit-keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }

  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg) scale(0.9);
  }

  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg) scale(1);
  }

  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg) scale(1.2);
  }

  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg) scale(1);
  }
}

@keyframes animationFramesThree {
  0% {
    transform: translate(165px, -179px);
  }

  100% {
    transform: translate(-346px, 617px);
  }
}

@keyframes waveBtn {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .3)
  }
  50% {
    box-shadow: 0 0 0 40px transparent
  }
  100% {
    box-shadow: 0 0 0 0 transparent
  }
}

.app_router {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center
}

html {
  font-size: 100px
}

#navleft {
  position: absolute;
  left: 0;
  bottom: 215px;
  width: 100%;
  height: 100%;
  background: url(/imgs/left-shape.png) no-repeat left bottom;
}

#nav {
  background-image: url("/imgs/bgnew.jpeg");
  background-size: cover;
  background-repeat: repeat-y;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center
}

.loginTitle {
  color: #2f2e3f;
  font-size: 32px;
  font-weight: 500
}

.loginTitle .split {
  margin: 0 16px
}

.loginTitle .loginActive {
  color: #2f2e3f
}

.margin-bottom-32 {
  margin-bottom: 25px
}

.open_wx_btn {
  background: #fff !important;
  color: #2f2e3f !important;
  border: 1px solid #e3e5e8;
  margin-top: 44px !important
}

.open_wx_btn.login-btn {
  border: initial !important
}

.open_wx_btn.login-btn:active, .open_wx_btn.login-btn:hover {
  background: initial !important
}

.open_wx_btn .svg-icon {
  cursor: pointer
}

.open_wx_btn .ic-wechat {
  margin: 0 22px
}

.open_wx_btn:hover {
  background: #f6f6f7 !important
}

.open_wx_btn:active {
  background: #edeeee !important
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

.mainContent {
  width: 295px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.loginButton {
  width: 320px;
  height: 56px;
  background: #2878ff;
  border-radius: 32px;
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer
}

.loginButton:hover {
  background: #3d85ff
}

.loginButton:active {
  background: #246ce6
}

.thirdLogin {
  margin-top: 32px;
  position: relative
}

.thirdLogin .line {
  height: 1px;
  background: #eeeff1;
  width: 320px;
  position: absolute
}

.thirdLogin .text {
  width: 98px;
  height: 100%;
  font-weight: 500;
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  background: #fff;
  z-index: 1
}

.phoneView {
  width: 320px;
  background: #fff;
  border: 1px solid #e3e5e8;
  box-sizing: border-box;
  border-radius: 8px;
  height: 44px;
  padding: 11px 12px;
  display: flex
}

.phoneView::-moz-placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView::placeholder {
  font-size: 14px;
  color: rgba(47, 46, 63, .45);
  opacity: 1
}

.phoneView:focus {
  background: rgba(40, 120, 255, .1) !important;
  border: 1px solid #2878ff !important;
  outline: none
}

.lanhuText .lanhuParent span {
  font-size: 14px
}

.inputView {
  overflow: hidden;
  position: relative
}

@-webkit-keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

@keyframes dialogFrame {
  0% {
    bottom: 0
  }
  to {
    bottom: 40px
  }
}

.login_title_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.dd-qr-code .self-defined-dd iframe {
  border-radius: 12px
}

.dd-grey-toolbar .toolbar-content svg {
  margin-right: 9px
}

.dd-grey-toolbar .toolbar-content p {
  font-size: 14px;
  line-height: 14px;
  padding-top: 1px;
  font-weight: 400;
  letter-spacing: 0;
  color: #2f2e3f
}

.wx_login_registry .wx_code .wx_account_code img {
  width: 100%;
  height: 100%;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #eeeff1
}

.home {
  display: flex;
  justify-content: center
}

.home .mainContent {
  width: 595px;
  background:rgba(255,255,255,0.9);
  border-radius: 20px;
  padding:40px 30px 40px
}

.home .loginView input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px #fff !important
}

.home .loginView .passView {
  position: relative
}

.home .loginView .passView .check {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer
}

.home .loginView .loginTitle {
  font-size: 24px;
  font-weight: 500;
  color: rgba(47, 46, 63, .45);
  cursor: pointer;
  margin-bottom: 20px
}

.home .loginView .loginTitle .split {
  margin: 0 16px;
  width: 3px;
  height: 28px;
  position: relative;
  top: 2px;
  background: #e3e5e8
}

.home .loginView .loginTitle .loginActive {
  color: #2f2e3f;
  font-weight: bold;
}

.home .wx_code_box {
  position: absolute;
  background: #fff;
  top: 25%;
  left: 50%;
  text-align: center;
  width: 405px;
  height: 560px;
  margin-left: -202px;
  box-sizing: border-box;
  z-index: 3
}

.shape-wrap {
  position: absolute;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}

.b-shape-1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 200px;
  margin: auto;
  text-align: center;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-2 {
  position: absolute;
  left: 140px;
  top: 45%;
  animation: animationFramesOne 20s infinite linear;
}

.b-shape-3 {
  position: absolute;
  left: 60px;
  top: 40%;
  animation: animationFramesThree 20s infinite linear;
}

.b-shape-4 {
  position: absolute;
  left: 60px;
  bottom: 80px;
  animation: animationFramesThree 20s infinite linear;
}
</style>
